<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style/bootstrap.css" rel="stylesheet">
    <script src="js/axios.js" type="application/javascript"></script>
    <script src="js/jquery.min.js" type="application/javascript"></script>
    <script src="js/bootstrap.min.js" type="application/javascript"></script>
    <script src="js/vue.js" type="application/javascript"></script>
    <script src="js/pagination.js" type="application/javascript"></script>

</head>
<body>
<div id="app" class="container">
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="exampleInputName2" placeholder="模糊查询">
            <input type="button" class="btn btn-primary" value="搜索">
        </div>
        <div class="form-group">
            <input type="button" class="btn btn-primary" @click="doAdd" value="添加">
        </div>
    </form>
    <table class="table table-striped table-bordered">
        <tr v-for="u in list">
            <td>{{u.id}}</td>
            <td>{{u.username}}</td>
            <td>

                {{u.sex}}</td>
            <td>{{u.birthday}}</td>
        </tr>
    </table>
    <div>
        <navigation :pages="pages" :current.syns="pageNo" @navpage="pageList"></navigation>
    </div>
    <div id="mymodel" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>

                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" v-model="user.username" placeholder="用户名">
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="sex" v-model="user.sex" value="0">男
                            </label>
                            <label>
                                <input type="radio" name="sex" v-model="user.sex" value="1">女
                            </label>
                        </div>
                        <div class="form-group">
                            <input type="DATE" class="form-control" v-model="user.birthday" name="birthday" placeholder="生日">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>

</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            pageNo:1,
            pages:100,//总页数;
            rows:3,
            list:[],
            user:{},
        },
        methods:{
            add(){
              axios.post("user/add",this.user).then(function(res){
                   /* alert(res.data())*/
                  if (res.data){
                      $('#mymodel').modal("hide");
                      vue.getPage();
                      vue.user = {};
                  }
              });
            },
            doAdd(){
                $('#mymodel').modal("show");
            },
            getPage(){

                //ajax请求
                axios.get("user/page?page="+this.pageNo+"&rows="+this.rows).then(function (res){
                    vue.list = res.data.list;
                    vue.pages = res.data.pages;
                });
            },
            pageList(curPage){
                console.log(curPage);
                this.pageNo = curPage;
                this.getPage();
            }
        },
        created:function (){
            this.getPage();
        },
    })
</script>
</html>